<template>
  <div class="dashboard-container">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card title="员工总数" :bordered="false">
          <template #extra><user-outlined /></template>
          <h2>1,234</h2>
          <p>较上月 <a-tag color="green">+12%</a-tag></p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="部门数量" :bordered="false">
          <template #extra><team-outlined /></template>
          <h2>15</h2>
          <p>较上月 <a-tag color="green">+2</a-tag></p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="待办事项" :bordered="false">
          <template #extra><schedule-outlined /></template>
          <h2>8</h2>
          <p>待处理 <a-tag color="red">紧急</a-tag></p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="本月入职" :bordered="false">
          <template #extra><solution-outlined /></template>
          <h2>24</h2>
          <p>较上月 <a-tag color="red">-3</a-tag></p>
        </a-card>
      </a-col>
    </a-row>

    <a-divider />

    <a-row :gutter="16">
      <a-col :span="16">
        <a-card title="员工分布统计">
          <DepartmentDistributionChart :data="departmentData" />
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="最近公告">
          <a-timeline>
            <a-timeline-item>系统升级通知 - 2023/10/15</a-timeline-item>
            <a-timeline-item>国庆节放假安排 - 2023/09/28</a-timeline-item>
            <a-timeline-item>新员工培训计划 - 2023/09/15</a-timeline-item>
            <a-timeline-item>年中绩效考核启动 - 2023/06/20</a-timeline-item>
          </a-timeline>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import {
  UserOutlined,
  TeamOutlined,
  ScheduleOutlined,
  SolutionOutlined
} from '@ant-design/icons-vue'
import DepartmentDistributionChart from '@/components/charts/DepartmentDistributionChart.vue'
import { ref } from 'vue'

// 模拟部门数据
const departmentData = ref([
  { type: '技术部', value: 120 },
  { type: '市场部', value: 90 },
  { type: '人力资源部', value: 50 },
  { type: '财务部', value: 30 },
  { type: '产品部', value: 80 },
  { type: '客服部', value: 60 }
])

</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

/* 确保图表容器有固定高度 */
.ant-card-body > div {
  height: 300px;
}
</style>